// 父类点赞按钮
class PraiseButton {
  constructor (color = 'red') {
    // 点赞次数
    this.hasPraise = 0;
    // 点赞文字
    this.btnContent ='点赞';
    // 按钮
    this.praiseBtn = document.createElement("button");
    // 背景颜色
    this.bgColor = color;

    this.render();
  }

  // 更新点赞数字和文字
  update (num) {
    this.hasPraise = num;
    this.praiseBtn.innerHTML = `${this.btnContent}      ${this.hasPraise}`;
  }

  // 渲染按钮
  render () {
    // const wrapper = document.querySelector(".homeworkWrapper");
    this.praiseBtn.innerHTML = `${this.btnContent}      ${this.hasPraise}`;
    this.praiseBtn.className = "praise-btn";
    this.praiseBtn.style.backgroundColor = this.bgColor;
    document.body.appendChild(this.praiseBtn);

    this.praiseBtn.addEventListener('click', () => {
      if (this.hasPraise >= 1) {
        this.hasPraise = 0;
        this.btnContent = '点赞'
        this.update(this.hasPraise);
      } else {
        this.hasPraise ++;
        this.btnContent = "取消";
        this.update(this.hasPraise);
      }

    })

  }

}


// 子类Thumb
class Thumb extends PraiseButton {
  constructor(color) {
    super(color);

    // 背景颜色
    this.bgColor = color
  }

}


new PraiseButton();

new Thumb('green');
new Thumb("orange");
new Thumb("deeppink");
new Thumb("purple");
new Thumb("blue");
